<template>
      <div style="width: 100%; height: 100%; background-color: black; display: flex; align-items: center; justify-content: center; flex-direction: column;">
          <router-view></router-view>
      </div>
  <div  style="z-index: -1;">
          <vue-particles id="tsparticles"
              :particlesInit="particlesInit" 
              :particlesLoaded="particlesLoaded" 
              :options="data.options"/>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue';
import { loadSlim } from "tsparticles-slim";
import axios from "axios";
let show = ref(true)
const data = reactive({
  options: {
    fpsLimit: 100,
    interactivity: {
      events: {
        onClick: {
          enable: true,
          mode: "push",
        },
        onHover: {
          enable: true,
          mode: "grab",
        },
        resize: true,
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.6,
          size: 10,
        },
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    particles: {
      color: {
        value: "#ffffff",
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: true,
        opacity: 0.5,
        width: 1,
      },
      collisions: {
        enable: true,
      },
      move: {
        direction: "none",
        enable: true,
        outMode: "bounce",
        random: false,
        speed: 2,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          value_area: 800,
        },
        value: 60,
      },
      opacity: {
        value: 0.5,
      },
      shape: {
        type: "circle",
      },
      size: {
        random: true,
        value: 3,
      },
    },
    detectRetina: true,
  },
})
const particlesInit = async engine => {
  await loadSlim(engine);
};
const particlesLoaded = async (container) => {
}
</script>
<style scoped lang="scss">
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

.v-leave-to {
    transform: translateY(120%);
}
.v-enter-from{
  transform: translateY(120%);
}

</style>